<script setup>
defineProps({
    modelValue: {
        type: Boolean,
        default: false,
    },
})
defineEmits(['update:modelValue'])
</script>

<template>
    <view
        class="relative flex h-7 w-14 items-center rounded-full bg-zinc-200"
        :class="{ 'bg-zinc-950': modelValue }"
        @click="$emit('update:modelValue', !modelValue)"
    >
        <view
            class="absolute left-1 size-6 rounded-full bg-zinc-50 transition"
            :class="{ 'translate-x-6': modelValue }"
        ></view>
    </view>
</template>
